import { computed, FunctionalComponent, onMounted, ref, watch, watchEffect, } from 'vue';
import { DeviceFunctionServiceCommandParam, DeviceServiceDetailResult, DeviceStatusServiceStatusListResult } from '../interface';
import { ElSwitch, ElButton } from 'element-plus'
import ElSlider from './ElSlider.vue'

type I = {
    name: string;
    category: {
        name: string;
        code: string;
        dataname?: string
    }[];
    value(value: any): any
    rander(value?: any, change?: any): JSX.Element;
    min?: number
    max?: number
    step?: number
}

const switchs: I = {
    name: '开关',
    category: [
        {
            name: 'dj',
            code: 'switch_led',
        },
        {
            name: 'cjkg',
            code: 'switch_1',
            dataname: '开关一'
        },
        {
            name: 'cjkg',
            code: 'switch_2',
            dataname: '开关二'

        },
        {
            name: 'cjkg',
            code: 'switch_3',
            dataname: '开关三'

        },
        {
            name: 'cjkg',
            code: 'switch_4',
            dataname: '开关四'

        },
        {
            name: 'szjqr',
            code: 'switch',
        },
    ],
    value(value: any) {
        return value ? '开' : '关'
    },
    rander(value: boolean, change: any) {
        return (<ElSwitch value={value} onChange={change}></ElSwitch>)
    }
}

const delectoption: Record<string, string[]> = {
    dj: ['switch_led', 'work_mode', 'bright_value_v2', 'temp_value_v2', 'countdown_1', 'do_not_disturb']
}

const luminance: I = {
    name: '亮度',
    category: [
        {
            name: 'dj',
            code: 'bright_value_v2'
        }
    ],
    value(value: any) {
        return value
    },
    min: 10,
    max: 1000,
    step: 1,
    rander(value: number, change: any) {
        return (<ElSlider min={this.min} max={this.max} step={this.step} value={value} onChange={change}></ElSlider>)
    }
}

const colourtemperature: I = {
    name: '色温',
    category: [
        {
            name: 'dj',
            code: 'temp_value_v2'
        }
    ],
    value(value: any) {
        return value
    },
    min: 0,
    max: 1000,
    step: 1,
    rander(value: number, change: any) {
        console.log(value)
        return (<ElSlider min={this.min} max={this.max} step={this.step} value={value} onChange={change}></ElSlider>)
    }
}

const countdown: I = {
    name: '倒计时',
    category: [
        {
            name: 'dj',
            code: 'countdown_1'
        }
    ],
    value(value: any) {
        return value
    },
    min: 0,
    max: 86400,
    step: 1,
    rander(value: number, change: any) {
        return (<ElSlider min={this.min} max={this.max} step={this.step} modelValue={value} onChange={change} ></ElSlider>)
    }
}

const doorcontact_state: I = {
    name: '防拆报警',
    category: [
        {
            name: 'mcs',
            code: 'doorcontact_state'
        }
    ],
    value(value: any) {
        return value ? '开' : '关'
    },
    rander(value: boolean, change: any) {
        return (<ElSwitch value={value} onChange={change}></ElSwitch>)
    }
}

const temper_alarm: I = {
    name: '门磁状态',
    category: [
        {
            name: 'mcs',
            code: 'temper_alarm'
        }
    ],
    value(value: any) {
        return value ? '开' : '关'
    },
    rander(value: boolean, change: any) {
        return (<ElSwitch value={value} onChange={change}></ElSwitch>)
    }
}



const objdata = [
    switchs,
    luminance,
    colourtemperature,
    countdown,
    doorcontact_state,
    temper_alarm,
]

type P = { device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult, commands: (devicelistoption: DeviceFunctionServiceCommandParam) => void, reset: (v: DeviceServiceDetailResult) => void }

const Instruct: FunctionalComponent<P> = (p) => {
    const data = ref<{
        code: string;
        value: string | number | boolean;
    }[]>([])
    // onMounted(() => {
    //     data.value = p.list?.status ? JSON.parse(JSON.stringify(p.list.status)) : []
    // })
    watchEffect(() => {
        data.value = p.list?.status ? p.list.status : []
    }, {

    })

    // watch(() => p.device, e => {
    //     data.value = p.list?.status ? JSON.parse(JSON.stringify(p.list.status)) : []
    // })

    function reset() {
        data.value = p.list?.status ? p.list.status : []
    }

    function commands() {
        const n = delectoption[p.device.category]
        if (n) {
            p.commands({ device_id: p.device.id, commands: data.value.filter(c => n.includes(c.code)) })
        } else {
            p.commands({ device_id: p.device.id, commands: data.value })
        }
    }



    return (
        <div>
            <h4>{p.device.name}</h4>
            <ul>
                {
                    data.value.map((e, k) => {
                        const data = objdata.find(c => c.category.find(c => c.code === e.code))
                        function change(v: any) {
                            e.value = v
                            console.log(v)
                        }
                        if (data) {
                            return (
                                <li>
                                    <div>{data.name}</div>
                                    <div>{data.rander(e.value, change)}</div>
                                </li>
                            )
                        }
                    })
                }
            </ul>
            <div>
                <ElButton onClick={() => p.reset(p.device)} >重置</ElButton>
                <ElButton onClick={() => commands()} >发送指令</ElButton>
            </div>
        </div>
    )
}

export default Instruct

